<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/layui/css/layui.css" />
	<script src="css/layui/layui.all.js"></script>
	<script src="js/basejs/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<!-- <link rel="stylesheet" type="text/css" href="css/layui/css/index.css" /> -->
</head>

	<body>
		<div id="app">
			<a href="https://cron.qqe2.com/" target="_blank">cron在线生成工具</a>
			<header>
				<div class="layui-btn-container">
					<el-button size="mini" icon="el-icon-plus" type="primary" @click=add()>添加</el-button>
				</div>
			</header>

		 <div>
		 	<el-table :data="tableData" border :header-cell-style="{background:'#f2f2f2'}"
		 		style="width: 100%;margin-top: 20px" max-height="500" @selection-change="handSelectionChange">
		 		<el-table-column type="selection" align="center" width="55">
		 		</el-table-column>
		 		<el-table-column align="center" label="id" width="110">
		 			<template slot-scope="scope">
		 				{{scope.row.id}}
		 			</template>
		 		</el-table-column>
		 	
		 		<el-table-column label="定时名称" align="center">
		 			<template slot-scope="scope">
		 				{{scope.row.schedName}}
		 			</template>
		 		</el-table-column>
				<el-table-column label="触发器名称" align="center">
					<template slot-scope="scope">
						{{scope.row.triggerName}}
					</template>
				</el-table-column>
		 		<el-table-column label="定时时间" align="center">
		 			<template slot-scope="scope">
		 				{{scope.row.cronExpression}}
		 			</template>
		 		</el-table-column>
				<el-table-column label="创建时间" align="center">
					<template slot-scope="scope">
						{{scope.row.creatTime}}
					</template>
				</el-table-column>
		 		<el-table-column label="操作" align="center">
		 			<template slot-scope="scope">
		 				<el-button size="mini" icon="el-icon-edit" type="primary" @click=update()>编辑</el-button>	
		 				<el-button size="mini" icon="el-icon-delete" type="danger" @click="open(scope.row.id)">删除</el-button>
		 			</template>
		 		</el-table-column>
		 	</el-table>
		 	<!--分页-->
		 	<el-pagination class="page" :total='total' :page-size="10" layout="total, sizes, prev, pager, next, jumper"
		 		@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		 </div>
		</div>
	</body>
		<script src="js/cron.js" type="text/javascript" charset="utf-8"></script>
	<style>
		a {
			color: #0000FF;
			/* text-align: center; */
		}
	</style>

</html>
